import React, { useState, useEffect } from 'react';
import {
  Link /* IGetInitialProps ssr */,
  Prompt,
  useDispatch,
  useSelector,
} from 'umi';

import styles from './index.less';

const Index = () => {
  const dispatch = useDispatch();
  const { count } = useSelector((state: any) => state['counter']);
  return (
    <div>
      <Prompt message="离开？" />
      <h1 className={styles.title}>Page index</h1>
      <Link to="/about/11" href="/about/:id">
        about
      </Link>
      {count}
      <button
        onClick={() => {
          /**
           * 组件中dispatch可触发 effect 和 reducer 需要置顶命名空间
           */
          dispatch({ type: 'counter/add', payload: 1 });
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          /**
           * 组件中dispatch可触发 effect 和 reducer 需要置顶命名空间
           */
          dispatch({ type: 'counter/cut', payload: 1 });
        }}
      >
        -1
      </button>
    </div>
  );
};

export default Index;
